<script>
import { ref, reactive } from 'vue';
import { useRouter } from "vue-router";
import { Toast } from 'vant';

export default {
    setup() {
        const active = ref(0);

        let data = reactive({
            lists: [
                {
                    title: "用户",
                    id: 1
                },
                {
                    title: "作者",
                    id: 2
                }
            ],
            datalist:JSON.parse(window.localStorage.getItem("guanzhu")),
            flag:true,
        })

        let router = useRouter()

        let back = () => {
            router.back()
        }

        //关注作者
        let checked = (id) => {
            let index = data.datalist.findIndex(item=>item.id==id)
            data.datalist[index].flag = !data.datalist[index].flag
            
            console.log(data.datalist[index].flag);
            if(data.datalist[index].flag){
                data.datalist[index].flag = true
                console.log("关注");
                window.localStorage.setItem("guanzhu",JSON.stringify(data.datalist[index]))
                window.localStorage.setItem("flag",JSON.stringify(data.datalist[index].flag))
                Toast.success("已关注")
            }else{
                data.datalist[index].flag = false
                console.log("取消");
                window.localStorage.removeItem("guanzhu",JSON.stringify(data.datalist[index]))
                window.localStorage.setItem("flag",JSON.stringify(data.datalist[index].flag))
                Toast.success("取消成功")
            }
            
        }
        //关注用户
        let flag = (id) => {
            let index = data.datalist.findIndex(item=>item.id==id)
            data.datalist[index].flag = !data.datalist[index].flag
            
            console.log(data.datalist[index].flag);
            if(data.datalist[index].flag){
                data.datalist[index].flag = true
                console.log("关注");
                window.localStorage.setItem("guanzhu",JSON.stringify(data.datalist[index]))
                window.localStorage.setItem("flag",JSON.stringify(data.datalist[index].flag))
                Toast.success("已关注")
            }else{
                data.datalist[index].flag = false
                console.log("取消");
                window.localStorage.removeItem("guanzhu",JSON.stringify(data.datalist[index]))
                window.localStorage.setItem("flag",JSON.stringify(data.datalist[index].flag))
                Toast.success("取消成功")
            }
            
        }
        
        
        return {
            active,
            data, 
            back ,
            checked,
            flag
        };
    },
}
</script>

<template>
    <div class="concern">
        <div class="container">
            <div class="con_top">
                <span class="iconfont icon-arrow-left" @click="back"></span>
                <h3>我的关注</h3>
            </div>
            <div class="con_conten">
                <van-tabs v-model:active="active" animated>
                    <van-tab v-for="(item, index) in data.lists" :key="index" :title="item.title">
                        <div class="con_box" v-if="data.datalist">
                            <div class="item" v-show="index == 0" v-for="item in data.datalist" :key="item.id">
                                <div class="image">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="con_name">
                                    <p>{{item.name}}</p>
                                    <span>我本堂堂青石表，岂与犬马共同情</span>
                                </div>
                                <div class="button" >
                                    <button @click="flag(item.id)" :class="[ item.flag?'':'con']">{{ item.flag ?'已关注'  :'+ 关注'}}</button>
                                </div>
                            </div>
                            
                            <div class="item" v-show="index == 1" v-for="item in data.datalist" :key="item.id">
                                <div class="image">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="con_name">
                                    <div class="name">
                                        <p>{{item.name}}</p>
                                        <p>作者</p>
                                    </div>
                                    <span>我本堂堂青石表，岂与犬马共同情</span>
                                </div>
                                <div class="button" >
                                    <button @click="checked(item.id)" :class="[item.flag?'':'con']">{{item.flag ?'已关注'  :'+ 关注' }}</button>
                                </div>
                            </div>
                            
                        </div>
                        <div class="con_box" v-if="!data.datalist">
                            <div class="item_box" v-show="index == 0">
                                <div class="img">
                                    <img src="../assets/imgs/gifs/img_1.png" alt="">
                                </div>
                                <p>暂无关注的用户</p>
                            </div>
                            <div class="item_box" v-show="index == 1">
                                <div class="img">
                                    <img src="../assets/imgs/gifs/img_1.png" alt="">
                                </div>
                                <p>暂无关注的用户</p>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "../assets/font-two/iconfont.css";

.concern {
    width: 100%;

    .con_top {
        padding: 30px 20px;
        display: flex;
        align-items: baseline;

        h3 {
            margin: 0 auto;
            font-weight: 600;
        }

        span {
            font-size: 16px;
        }
    }
}

::v-deep {
    .con_conten {
        .van-tabs__line {
            width: 18px;
        }

        .van-tab__text--ellipsis {
            font-size: 16px;
        }

        .van-tab--active {
            font-weight: 600;
        }

        .van-tabs--line .van-tabs__wrap {
            border-bottom: 1px solid #eee;
        }

        .van-tab__panel,
        .van-tab__panel-wrapper {
            padding: 10px;

            .con_box {
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;

                    .image {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .con_name {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 200px;

                        p {
                            font-size: 14px;
                            &:nth-child(2){
                                font-size: 13px;
                                background-color: #b1917b;
                                color: #fff;
                                border-radius: 3px;
                                margin-left: 10px;
                                padding: 0 3px;
                            }
                        }

                        span {
                            font-size: 12px;
                            margin-top: 10px;
                            color: #838383;


                        }
                        .name{
                            display: flex;
                            align-items: center;
                            
                        }
                    }

                    .button {
                        .con{
                            color: #e57334;
                        }
                        button {
                            padding: 7px 10px;
                            font-size: 13px;
                            border: none;
                            border-radius: 20px;
                            color: #919191;

                        }
                    }
                }
                .item_box{
                    padding: 130px 0;
                    .img{
                        width: 126px;
                        height: 126px;
                        margin: 0 auto;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p{
                        font-size: 13px;
                        color: #838383;
                        text-align: center;
                        margin-top: 20px;
                    }
                }
            }
        }
    }

}
</style>